import { get } from 'jquery'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { getappoint, getBus, delyuding, getMsg, getshoucanglist, getyudinglist, getbuslist } from '../../../redux/actionCreator'
import pxPage from '../../../root/pxPage'
// import delyuding from '../../../redux/actionCreator/delyuding'

class Appointment extends Component {
    constructor(props) {
        super(props)

        this.props.dispatch(getbuslist())
        this.props.dispatch(getyudinglist(getMsg(this.props).user_id))
    }

    render() {

        return (
            <div style={{ minHeight: '100vh', display: 'flex' }}>

                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>

                    <div style={{ width: '90%', margin: '0 auto' }}>

                        <div style={{ height: '20px' }}></div>
                        {/* 返回按键 */}
                        <span >
                            <i
                                className="iconfont icon-fanhui"
                                style={{ fontSize: '1.7em' }}
                                onClick={() => this.props.history.goBack()}>
                            </i>
                        </span>
                        <div style={{ fontSize: '1.5em', fontWeight: 'bold', paddingTop: '25px', paddingBottom: '20px' }}>我的预约</div>
                        {/* <Appolist/> */}
                        <ul>
                            {this.props.yuding.map((item, index) =>
                                <li

                                    key={index}
                                    className='hot-li'
                                    style={{ borderRadius: '20px', backgroundColor: '#D47666' }}>

                                    <img className="hot-img" src={`http://www.h5weixin.club:1025/api/image/${item.commodity_pic}`}></img>

                                    <span className="hot-word">

                                        <div className="hot-word-title">{((getBus(this.props)).filter((item2) => item2.business_id === item.business_id))[0].business_name}·{item.commodity_title}</div>
                                        <div className="hot-word-msg">
                                            <div>
                                                <i className="iconfont icon-yuyue1"></i>
                                                <span>{item.time}</span>
                                            </div>
                                            <div>
                                                <i className="iconfont icon-didian"></i>
                                                <span>{((getBus(this.props)).filter((item2) => item2.business_id === item.business_id))[0].business_address}·{item.commodity_title}</span>
                                                {/* <span>{((this.props.business).filter((item2) => item2.business_id === item.business_id))[0].business_name}</span> */}
                                            </div>
                                            <div>
                                                <i className="iconfont icon-jinqian"></i>
                                                <span>{item.commodity_money}</span>
                                            </div>
                                            <div>

                                                {/* 预约人数 */}
                                                <span>
                                                    <i className="iconfont icon-yuyue1"></i>
                                                    {item.commodity_appoint}
                                                </span>

                                                {/* 收藏人数 */}
                                                <span style={{ marginLeft: '10px' }}>
                                                    <i className="iconfont icon-xin1"></i>
                                                    {item.commodity_collect}
                                                </span>

                                                {/* 取消预定 */}
                                                <span
                                                style={{position:'relative',left:`${pxPage(10)}px`}}
                                                    onClick={() => {
                                                        this.props.dispatch(delyuding(getMsg(this.props).user_id, item.commodity_id))
                                                    }}
                                                >
                                                    <i className="iconfont icon-del"></i>
                                                </span>

                                                {/* 进入详情页 */}
                                                <span style={{ position: 'relative', left: `${pxPage(70)}px` }}
                                                    onClick={() => {
                                                        this.props.history.push({
                                                            pathname: '/detail',
                                                            // search: `commodity_id=${item.commodity_id}`
                                                        })
                                                        // 将商品信息保存在本地方便存取 
                                                        localStorage.setItem('commoditydetail', JSON.stringify(item))
                                                        // 将此商品所对应的商家信息存储在本地方便跳转之后输出信息
                                                        this.props.business.map((item2) => {
                                                            if (item2.business_id == item.business_id) {
                                                                localStorage.setItem('busdetail', JSON.stringify(item2))
                                                            }
                                                        })
                                                    }}
                                                >
                                                    <i className="iconfont icon-youjiantou"

                                                    ></i>

                                                </span>
                                            </div>


                                        </div>
                                    </span>
                                </li>
                            )}
                        </ul>
                    </div>
                </div>
                <div style={{ flex: '1' }}></div>
            </div>
        )
    }
}


const mapStateToProps = (state) => {
    // console.log(state);
    return {
        business: state.business,
        shop: state.shop,
        yuding: state.yuding,
        login: state.login
    }
}
// export default withRouter(Appointment)
export default withRouter(connect(mapStateToProps)(Appointment))